<template>
    <div class="header">
        <div class="left">
            <n-icon class="icon" :size="24" @click="changeCollapse">
                <MenuUnfoldOutlined v-if="isOpen" />
                <MenuFoldOutlined v-else />
            </n-icon>
            <n-breadcrumb>
                <n-breadcrumb-item
                    v-for="(item, index) in breadcrumbList"
                    :key="index"
                    :clickable="false"
                >
                    <n-icon :component="item.icon" />
                    {{ item.title }}</n-breadcrumb-item
                >
            </n-breadcrumb>
        </div>
        <div class="right">
            <n-dropdown :options="options" :on-select="onSelect">
                <span>{{ userInfo.name }}</span>
            </n-dropdown>
        </div>
        <PublicEdit
            ref="modelRef"
            v-model="showModal"
            title="修改密码"
            :form-list="formList"
            :rules="formRules"
            handle-save
            @save="onSave"
        >
        </PublicEdit>
    </div>
</template>

<script setup>
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    EditOutlined as EditIcon
} from '@vicons/antd';
import {
    PersonCircleOutline as UserIcon,
    LogOutOutline as LogoutIcon
} from '@vicons/ionicons5';
import PublicEdit from '@/components/PublicEdit/index.vue';
import { useStore } from '@/store';
import { useRoute, useRouter } from 'vue-router';
import { menu } from '@/router/modules/menu';
import { clearToken } from '@/utils/auth';
import useIcon from '@/hooks/useIcon';
import usePassword from './usePassword';
import { ref, toRefs, watch } from 'vue';

const store = useStore();
const route = useRoute();
const router = useRouter();
const modelRef = ref(null);
const breadcrumbList = ref([]);
const { isOpen, userInfo } = toRefs(store);
const { renderIcon } = useIcon();
const options = ref([
    {
        label: '用户资料',
        key: 'profile',
        icon: renderIcon(UserIcon)
    },
    {
        label: '修改密码',
        key: 'changePassword',
        icon: renderIcon(EditIcon)
    },
    {
        label: '退出登录',
        key: 'logout',
        icon: renderIcon(LogoutIcon)
    }
]);
const { showModal, formList, formRules, changePassword, onSave } = usePassword(
    userInfo,
    modelRef
);
// 登出
const logOut = () => {
    clearToken();
    router.push({ name: 'login' });
};
// 查看资料
const profile = () => {
    console.log('查看资料');
};

const funcConfig = {
    logout: logOut,
    profile: profile,
    changePassword: changePassword
};
const onSelect = val => {
    console.log(`output->666`, val);
    funcConfig[val]();
};
const changeCollapse = () => {
    store.setIsOpen(!isOpen.value);
};
const loop = (arr, result = []) => {
    for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        if (item.path === route.path) {
            result.unshift({
                title: item.meta?.title,
                icon: item.meta?.icon
            });
            return result;
        }
        if (item.children?.length) result = loop(item.children, result);
        if (result?.length)
            result.unshift({
                title: item.meta?.title,
                icon: item.meta?.icon
            });
    }
    return result;
};

const init = () => {
    breadcrumbList.value = loop(menu);
};
watch(() => route.path, init, { immediate: true });
</script>

<style lang="less" scoped>
@import './index.less';
</style>
